<template>
	<!-- <view class="page" :style="{background:t('color2')}"> -->
	<view class="page">
		<!-- 自定义导航栏 -->
		<view class="custom-navbar" :style="{ height: navHeight + 'px', paddingTop: statusBarHeight + 'px' }">
			<view class="nav-left" @click="goBack">
				<view class="back-icon"></view>
			</view>
			<view class="nav-middle" @click.stop="toWork">
				<image class="nav-avatar" :src="author.headimg" mode="aspectFill"></image>
				<text class="nav-name">{{ author.nickname }}</text>
			</view>
			<!-- <view class="nav-right" v-if="mid !== datainfo.mid">
				<view class="nav-follow-btn" @click.stop="handleFollow">
					{{ datainfo.is_follow == 1 ? '已关注' : '关注' }}
				</view>
			</view>
			<view class="share">
				<image class="share-icon" src="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250425/e24a338314cffa3106d090118046055c.png" mode=""></image>
			</view> -->
			<!-- 分享按钮（定位到胶囊左侧） -->
			<view class="share" :style="{ right: menuButtonInfo.width + 'px' }">
				<image class="share-icon"
					src="https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250425/e24a338314cffa3106d090118046055c.png"
					@click.stop="showFriendList"></image>
			</view>
			<!-- 关注按钮（根据需求调整位置） -->
			<view class="nav-right" v-if="mid !== datainfo.mid" :style="{ right: menuButtonInfo.width + 60 + 'px' }">
				<view class="nav-follow-btn" @click.stop="handleFollow">
					{{ datainfo.is_follow == 1 ? '已关注' : '关注' }}
				</view>
			</view>
		</view>

		<!-- 内容区域 -->
		<view class="container" :style="{ marginTop: navHeight + 'px' }">
			<!-- <view class="container"> -->
			<!-- 轮播图 -->
			<block v-if="datainfo.type == 1">
				<swiper class="swiper" :current="currentIndex" :indicator-dots="true" :autoplay="autoplay"
					:interval="5000" @change="onMainSwiperChange">
					<swiper-item v-for="(item, index) in datainfo.images" :key="index" class="swiper-item">
						<view class="swiper-item-view">
							<image class="img" :src="item" mode="aspectFit" @tap="previewImage" :data-url="item"
								:data-urls="Array.isArray(datainfo.images) ? datainfo.images.join(',') : ''" />
						</view>
					</swiper-item>
				</swiper>
			</block>
			<view class="videobox" v-if="datainfo.type == 2">
				<video class="video" id="video" :src="datainfo.video_url"></video>

			</view>
			<view class="container-main">
				<view class="container-main-title">
					<view class="title-box">
						{{datainfo.title}}
					</view>
					<view class="">
						{{datainfo.content}}
					</view>
				</view>
				<view class="main-shop" v-if="datainfo.product" @click.stop="toProduct(datainfo.product.id)">
					<view class="main-shop-left">
						<image class="shop-img" :src="datainfo.product.pic" mode=""></image>
						<view class="main-shop-left-text">
							<view class="text-name">
								{{datainfo.product.name}}
							</view>
							<view class="main-shop-price">
								<view class="">
									<text>￥</text>
									<text>{{datainfo.product.sell_price}}</text>
								</view>
								<view class="main-shop-sale">
									<text>已售</text>{{datainfo.product.sales}}
								</view>
							</view>
						</view>
					</view>
					<view class="main-shop-right">
						<image class="arr-right" src="/static/img/arrowright.png" mode=""></image>
					</view>
				</view>
				<view class="friend-box" v-if="friends && friends.length>0">
					<view class="friend-box-item" v-for="(item,index) in friends" :key="index">
						@{{item.nickname}}
					</view>
				</view>
				<view class="main-date">
					<text class="main-date-text">{{datainfo.create_time}}</text>
					<text class="main-date-address">{{author.city}}</text>
				</view>
			</view>
			<!-- 评论区 -->

			<!-- <view class="comment-section" :style="{background:t('color2')}" v-if="datainfo.comments>0"> -->
			<view class="comment-section" v-if="datainfo.comments>0">
				<text class="section-title">共{{datainfo.comments || 0}}条评论</text>
				<scroll-view class="comment-list" v-if="comments.length > 0" scroll-y="true"
					@scrolltolower="loadMoreComments">
					<view class="comment-item" v-for="(comment, index) in comments" :key="index">
						<view class="comment-user">
							<image class="user-avatar" @click.stop="toWorks(comment)"
								:src="comment.member && comment.member.headimg" mode="aspectFill"></image>
							<view class="user-info">
								<view class="user-info-flex">
									<view class="">
										<view class="user-name">
											{{comment.member && comment.member.nickname }}{{datainfo.mid == comment.mid  ? '（作者）' : '' }}
										</view>
										<view v-if="comment.content" class="comment-content">{{ comment.content }}
										</view>
										<view class="comment-extra">

											<text class="comment-date">{{ comment.create_time }}</text>
											<text class="reply-btn" @tap="handleReply(comment)">回复</text>

										</view>
									</view>
									<view class="comment-right-icon" @click="addCommentThumb(comment)">
										<image class="item-icon" v-if="comment.is_thumbs ==0"
											:src=" static_url + '/static/comment_icon/like_icon1.png'">
										</image>
										<image class="item-icon" v-if="comment.is_thumbs ==1"
											:src=" static_url + '/static/comment_icon/like_icon2.png'">
										</image>
										<text>{{comment.thumbs}}</text>
									</view>
								</view>
								<view class="reply-list" v-if="comment.sub_comment !== ''">
									<view class="reply-item" v-for="(item,index) in comment.sub_comments" :key="index">
										<image class="reply-avatar" @click.stop="toWorks(item)"
											:src="item.member && item.member.headimg" mode="aspectFill"></image>
										<view class="reply-info">
											<view class="reply-name">
												{{ item.member && item.member.nickname }}{{datainfo.mid == item.mid ? '（作者）' : '' }}
											</view>
											<view class="reply-content">

												<template v-if="item.reply_member">
													<text class="reply-to">回复了{{item.reply_member.nickname}}：</text>
												</template>
												<text style="word-break: break-all;">{{item.content}}</text>
											</view>
											<view class="reply-extra">
												<text class="reply-date">{{ item.create_time }}</text>
												<text class="reply-btn" @tap="handleReply(comment, item)">回复</text>
											</view>
										</view>
									</view>
									<view class="load-more-sub" v-if="comment.isExpanded && !subCommentNoMore">
										<text class="load-more-btn"
											@tap="loadMoreSubComments(comment, comment.sub_comment)">
											加载更多
										</text>
									</view>
									<view class="no-more" v-if="comment.isExpanded && subCommentNoMore">
										<text>没有更多了</text>
									</view>
									<view class="expand-btn" @tap="toggleReplies(comment, comment.sub_comment)"
										v-if="comment.sub_comment_count>0">
										<text class="expand-text">
											{{ comment.isExpanded ? '收起' : `展开${comment.sub_comment_count}条回复` }}
										</text>
									</view>
								</view>
							</view>
						</view>

					</view>

					<nomore text="没有更多评论了" v-if="noMore"></nomore>
				</scroll-view>
				<!-- <view class="comment-tip" v-else> 
			    </view> -->
				<view class="comment-tip" v-if="loaddata">
					{{ commentTip }}
				</view>
			</view>
			<view class="comment-nodata" v-else>
				暂无评论
			</view>


			<!-- 评论输入框 -->
			<!-- <view class="comment-input-wrapper" :style="{background:t('color2')}"> -->
			<view class="comment-input-wrapper" :class="{'is-commenting': isCommenting}">
				<view class="comment-input-box" :class="{'has-reply': replyTo}">
					<view v-if="replyTo" class="reply-tag" @tap="clearReply">
						<text>@{{ replyTo.username }}</text>
						<text class="close-icon">×</text>
					</view>
					<input class="comment-input" type="text" v-model="commentText" :placeholder="getPlaceholder"
						:focus="inputFocus" @focus="onInputFocus" @blur="onInputBlur" @confirm="sendComment"
						:adjust-position="false" :cursor-spacing="20" confirm-type="send" />
					<view class="send-btn" :class="{'active': commentText.trim().length > 0}"
						:style="{ color: commentText.trim().length > 0 ? t('color1') : '#999' }" @tap="sendComment">发送
					</view>
				</view>
				<view class="comment-input-right" v-if="!isCommenting">
					<view class="comment-input-right-item" @click="addThumbs">
						<image class="item-icon"
							:src="isthumbs ? static_url + '/static/comment_icon/like_icon2.png' : static_url + '/static/comment_icon/like_icon1.png'"
							mode=""></image>
						<view class="item-num">
							{{ formatNumber(thumbsCount) }}
						</view>
					</view>
					<view class="comment-input-right-item" @click="addfavorite">
						<image class="item-icon"
							:src="isfavorite ? static_url + '/static/comment_icon/five_icon2.png' : static_url + '/static/comment_icon/five_icon1.png' "
							mode=""></image>
						<view class="item-num">
							{{ formatNumber(favoriteCount) }}
						</view>
					</view>

					<view class="comment-input-right-item">
						<image class="item-icon" :src="static_url + '/static/comment_icon/comment_icon.png'" mode="">
						</image>
						<view class="item-num">
							{{ formatNumber(commentCount) }}
						</view>
					</view>
				</view>
			</view>

		</view>
		<view v-if="friendListShow" class="popup__container">
			<view class="popup__overlay" @tap.stop="closeFriendList"></view>
			<view class="popup__modal friend-list-modal">
				<view class="popup__title">
					分享至
					<image @tap.stop="closeFriendList" class="dialog-close-icon" src="/static/img/close.png" mode="">
					</image>
				</view>
				<view class="friend-list" v-if="friendList.length>0">
					<view class="friend-item" v-for="(friend, index) in friendList" :key="index"
						@tap="toggleFriendSelection(friend)">
						<view class="avatar-container">
							<image class="friend-avatar" :src="friend.member && friend.member.headimg"
								mode="aspectFill"></image>
							<view class="friend-checkbox" :class="{ 'checked': isFriendSelected(friend) }">
								<text v-if="isFriendSelected(friend)">✓</text>
							</view>
						</view>
						<view class="friend-info">
							<view class="friend-name">{{friend.member &&friend.member.nickname}}</view>
						</view>
					</view>
					<view class="load-more-data" v-if="!friendListNoMore" @tap="loadMoreFriends">
						<view class="load-more-data-top">
							...
						</view>
						<view class="load-more-data-text">查看更多</view>
					</view>
				</view>

				<view class="load-more" v-else>
					<text>暂无数据</text>
				</view>
				<block v-if="tempSelectedFriends.length>0">
					<view class="content-box">
						<textarea class="content-input" v-model="content" placeholder="跟朋友说点什么吧..."
							placeholder-style="color: #999999;" maxlength="500" />
						<view class="">
							<image class="content-img" :src="datainfo.pic" mode=""></image>
						</view>
					</view>
					<view class="fixed-confirm-btn" :style="{background:t('color1')}"
						@tap.stop="confirmFriendSelection">
						发送
					</view>
				</block>
				<view class="share-methods" v-else>
					<view class="methods-list">

						<view class="method-item">
							<button class="method-item" plain style="border: none;box-shadow: none;"
								@click="dialogToggle">
								<image src="@/pagesEchart/static/images/pyq.png" mode="aspectFit">
								</image>
								<text style="transform: translateX(-10rpx);"><text
										style="opacity: 0;">占</text>朋友圈</text>
							</button>
						</view>
						<view class="method-item">
							<button class="method-item" plain open-type="share" @click="share"
								style="border: none;box-shadow: none;">
								<image src="/static/img/weixin.png" mode="aspectFit"></image>
								<text>分享好友</text>
							</button>
						</view>
						<view class="method-item">
							<button class="method-item" plain style="border: none;box-shadow: none;"
								@click="openPoster">
								<image src="@/pagesEchart/static/images/poster.png" mode="aspectFit">
								</image>
								<text style="transform: translateX(-10rpx);"><text
										style="opacity: 0;">占</text>生成海报</text>
							</button>
						</view>
						<view class="method-item">
							<button class="method-item" plain style="border: none;box-shadow: none;" @click="copyLink">
								<image src="@/pagesEchart/static/images/link.png" mode="aspectFit"></image>
								<text>复制链接</text>
							</button>
						</view>
						<!-- 提示窗示例 -->
						<uni-popup ref="alertDialog" type="dialog">
							<view class="tipcontent">
								<view class="tiptitle">分享到朋友圈</view>
								<image :src="tipimg" mode="aspectFit"></image>
								<button class="tipbtn" @tap="closedia"
									:style="{ backgroundColor: t('color1') }">我知道了</button>
							</view>
						</uni-popup>
					</view>
				</view>
			</view>
		</view>

		<view v-if="isPoster" class="popup__container">

			<view class="poster-section">

				<view class="close-poster" @tap.stop="closePoster"> x</view>
				<view class="goods-card">
					<image @tap="previewImage" :data-url="sharePoster" class="goods-image" :src="sharePoster"
						mode="aspectFit">
					</image>
				</view>
			</view>

			<view class="download-btn" :style="{ backgroundColor: t('color1') }" @click.stop.prevent="save">
				<image style="width: 30rpx;height: 30rpx;margin-right: 10rpx;margin-bottom: -5rpx;"
					src="@/pagesExt/static/images/down.png" mode=""></image>
				下载海报
			</view>
			<!-- 分享方式 -->
			<view class="share-methods">
				<text class="divider-text">——————————————————</text>
				<text class="divider-text">或</text>
				<view class="methods-list">
					<view class="method-item">
						<button class="method-item" plain style="border: none;box-shadow: none;" @click="dialogToggle">
							<image src="@/pagesEchart/static/images/pyq.png" mode="aspectFit">
							</image>
							<text style="transform: translateX(-10rpx);"><text style="opacity: 0;">占</text>朋友圈</text>
						</button>
					</view>
					<view class="method-item">
						<button class="method-item" plain open-type="share" @click="share"
							style="border: none;box-shadow: none;">
							<image src="@/static/img/weixin.png" mode="aspectFit"></image>
							<text>分享好友</text>
						</button>
					</view>
					<view class="method-item">
						<button class="method-item" plain style="border: none;box-shadow: none;" @click="copyLink">
							<image src="@/pagesEchart/static/images/link.png" mode="aspectFit"></image>
							<text>复制链接</text>
						</button>
					</view>
					<!-- 提示窗示例 -->
					<uni-popup ref="alertDialog" type="dialog">
						<view class="tipcontent">
							<view class="tiptitle">分享到朋友圈</view>
							<image :src="tipimg" mode="aspectFit"></image>
							<button class="tipbtn" @tap="closedia"
								:style="{ backgroundColor: t('color1') }">我知道了</button>
						</view>
					</uni-popup>
				</view>
			</view>
		</view>
	</view>
	</view>
</template>

<script>
	var app = getApp();
	export default {
		data() {
			return {
				navHeight: 44, // 导航栏内容高度（不包括状态栏）
				statusBarHeight: 20, // 状态栏高度
				menuButtonInfo: {}, // 胶囊按钮信息
				mid: '',
				isFollowed: false,
				currentIndex: 0,
				autoplay: true,
				friends: [],
				likeCount: 123,
				commentText: '',
				commentCount: 45,
				collectCount: 67,

				comments: [

				],
				mid: '',
				nomore: false,
				loaddata: false,
				replyTo: null,
				pre_url: app.globalData.pre_url,
				static_url: app.globalData.static_url,
				isfavorite: false,
				isthumbs: false,
				thumbsCount: 0,
				favoriteCount: 0,
				commentCount: 0,
				opt: {},
				datainfo: {},
				author: {},
				showRight: true,
				page: 1,
				limit: 10,
				loading: false,
				noMore: false,
				sub_comment_list: [],
				subCommentPage: 1, // 子评论当前页码
				subCommentLimit: 10, // 子评论每页数量
				subCommentLoading: false, // 子评论加载状态
				subCommentNoMore: false, // 子评论是否没有更多
				friendListShow: false,
				friendList: [],
				selectedFriends: [],
				friendListPage: 1,
				friendListLimit: 10,
				friendListLoading: false,
				friendListNoMore: false,
				tempSelectedFriends: [], // 临时存储选中的好友
				content: '',
				tipimg: 'https://hedashepin.oss-cn-guangzhou.aliyuncs.com/upload/3/20250317/6c8755ec7b6473ba8c735b4bfb95773b.png',
				share_title: '',
				share_path: '',
				share_imageUrl: '',
				isPoster: false,
				sharePoster: "",
				inputFocus: false,
				isCommenting: false, // 添加评论状态标记
			}
		},
		onLoad(opt) {
			this.mid = app.globalData.mid;
			// #ifndef H5 || APP-PLUS || MP-ALIPAY
			// 获取系统信息
			const systemInfo = uni.getSystemInfoSync()
			this.statusBarHeight = systemInfo.statusBarHeight || 20

			// 获取胶囊按钮信息（仅微信小程序）
			if (uni.getMenuButtonBoundingClientRect) {
				const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
				this.menuButtonInfo = menuButtonInfo
				// 计算导航栏高度 = 状态栏高度 + 胶囊按钮高度 + (胶囊按钮上边距 - 状态栏高度) * 2
				this.navHeight = menuButtonInfo.bottom + (menuButtonInfo.top - this.statusBarHeight)
			} else {
				// 非微信小程序，使用默认高度
				this.navHeight = this.statusBarHeight + 44
			}
			// #endif
			this.opt = opt;
			this.getdata();
			this.getlist()
		},
		onReachBottom() {
			this.getlist(true); // 加载下一页
		},
		onPullDownRefresh() {
			this.getdata();
			this.products = [];
			this.page = 1;
			this.getlist(false, true);
		},
		onReachBottom() {
			this.getlist(true, false); // 加载下一页
		},
		computed: {
			scrollViewClass() {
				return {
					'scrollable-content': true,
					'has-input': this.currentTab === 'comment'
				}
			},
			getPlaceholder() {
				return this.replyTo ? '回复 ' + this.replyTo.username : '说点什么...';
			}
		},
		onShareAppMessage() {
			return {
				title: this.share_title,
				path: this.share_path,
				imageUrl: this.share_imageUrl,
			};
		},

		onShareTimeline(res) {
			return {
				title: this.share_title,
				imageUrl: this.share_imageUrl,
				// path: this.share_path,分享到朋友圈不能设置路径只能分享当前页
				query: 'from=shareTimeline&params=' + this.shareUrl + '&gid=' + this.id + '&ptype=' + this.ptype +
					'&pmid=' + this.pmid, //页面打开的传参
			}
		},
		methods: {
			getdata() {
				var that = this;

				app.get('MemberNote/noteInfo', {
					id: that.opt.id,
					source: that.opt.type || 0
				}, function(res) {
					if (res.status == 200) {
						that.datainfo = res.data;
						that.author = res.data.member;
						that.friends = res.data.friends;
						that.favoriteCount = res.data.collects;
						that.thumbsCount = res.data.thumbs;
						that.commentCount = res.data.comments;
						that.share_title = res.data.title;
						// Set thumbs and favorite status based on API response
						that.isthumbs = res.data.is_thumbs === 1;
						that.isfavorite = res.data.is_collect === 1;
						let type = that.opt.type;
						let id = that.opt.id;
						that.share_path = '/pagesEchart/find/works-detail?type=' + type + '&id=' + id;
						that.share_imageUrl = res.data.pic
					} else {
						app.error(res.msg)
					}
				});
			},

			getlist(isLoadMore = false, forceRefresh = false) {
				if ((this.loading || this.noMore) && !forceRefresh) return;
				this.loading = true;
				console.log(app.globalData.memberinfo, "app.globalData.");
				// Get current user info safely
				const currentUser = {
					nickname: app.globalData.memberinfo.nickname,
					headimg: app.globalData.memberinfo.headimg,
					mid: app.globalData.mid || ''
				};

				// Determine page logic
				let page;
				if (isLoadMore) {
					page = this.page + 1;
				} else if (forceRefresh) {
					page = this.page;
				} else {
					page = 1;
				}

				app.get('MemberNote/commentList', {
					member_note_id: this.opt.id,
					page: page,
					limit: this.limit
				}, (res) => {
					this.loaded();
					if (res.status === 200) {
						const processedData = res.data.map(comment => {
							// Process main comment
							const processedComment = {
								...comment,
								isExpanded: false,
								sub_comments: [],
								sub_comment_count: comment.sub_comment_count || 0
							};

							// Process sub-comment if exists
							if (comment.sub_comment) {
								processedComment.sub_comments = [{
									...comment.sub_comment,
									member: comment.sub_member || {
										nickname: currentUser.nickname,
										headimg: currentUser.headimg,
										mid: currentUser.mid
									},
									reply_to: comment.reply_to_member ||
										null // Preserve reply relationship
								}];
							}

							return processedComment;
						});

						if (isLoadMore) {
							this.comments = [...this.comments, ...processedData];
							this.page = page;
						} else {
							this.comments = processedData;
							this.page = forceRefresh ? page : 1;
						}
						this.noMore = res.data.length < this.limit;
					}
					this.loading = false;
				});
			},
			// 统一处理点赞/收藏操作
			handleAction(item, actionType) {
				const apiMap = {
					'thumb': 'MemberNote/noteThumb', // 点赞/取消点赞
					'collect': 'MemberNote/noteCollect' // 收藏/取消收藏
				};
				app.post(apiMap[actionType], {
					member_note_id: item.id
				}, (res) => {

					if (res.status == 200) {
						// 操作成功，刷新当前列表
						this.getlist();
						// 可选：单独更新当前项的UI状态（避免重新请求整个列表）
						// this.updateItemStatus(item, actionType, res.data.is_active);
					} else {
						uni.showToast({
							title: res.msg || '操作失败',
							icon: 'none'
						});
					}
				});
			},
			toWork() {
				let mid = this.datainfo.mid;
				uni.navigateTo({
					url: '/pagesEchart/find/works?mid=' + mid
				})
			},
			toWorks(item) {

				let mid = item.mid;
				uni.navigateTo({
					url: '/pagesEchart/find/works?mid=' + mid
				})
			},
			// 显示好友列表
			showFriendList() {
				this.tempSelectedFriends = [...this.selectedFriends]; // 复制当前选中的好友
				this.loadFriends();
			},

			// 关闭好友列表
			closeFriendList() {
				this.friendListShow = false;
				this.tempSelectedFriends = []; // 清空临时选中
			},

			// 确认好友选择
			confirmFriendSelection() {
				var that = this;
				that.selectedFriends = [...that.tempSelectedFriends];
				const mid = [...new Set(that.selectedFriends.map(friend => friend.mid))].join(',');
				app.showLoading('发送中...');
				app.post('MemberNote/shareToFriend', {
					member_note_id: that.datainfo.member_note_id,
					mid: mid,
					content: that.content
				}, function(data) {
					app.showLoading(false);
					if (data.status == 200) {
						app.success(data.msg)
						setTimeout(() => {
							that.friendListShow = false;
							that.selectedFriends = [];
							this.comment = '';
						}, 1500)

					} else {
						app.error(data.msg)
					}

				});

			},

			// 加载好友列表
			loadFriends(isLoadMore = false) {
				if (this.friendListLoading || (isLoadMore && this.friendListNoMore)) return;

				this.friendListLoading = true;
				const page = isLoadMore ? this.friendListPage + 1 : 1;

				app.get('MemberNote/followList', {
					page: page,
					limit: this.friendListLimit,
					is_each_follow: 1
				}, (res) => {
					this.friendListLoading = false;

					if (res.status === 200) {
						if (isLoadMore) {
							this.friendList = [...this.friendList, ...res.data];
							this.friendListPage = page;
						} else {
							this.friendList = res.data;
							this.friendListPage = 1;
						}
						this.friendListShow = true;
						this.friendListNoMore = res.data.length < this.friendListLimit;
					} else {
						app.error(res.msg);
					}
				});
			},

			// 加载更多好友
			loadMoreFriends() {
				this.loadFriends(true);
			},

			// 切换好友选择状态
			toggleFriendSelection(friend) {
				const index = this.tempSelectedFriends.findIndex(f => f.id === friend.id);
				if (index > -1) {
					this.tempSelectedFriends.splice(index, 1);
				} else {
					if (this.tempSelectedFriends.length >= 20) {
						uni.showToast({
							title: '最多只能@20个好友',
							icon: 'none'
						});
						return;
					}
					this.tempSelectedFriends.push(friend);
				}
			},

			// 检查好友是否被选中
			isFriendSelected(friend) {
				return this.tempSelectedFriends.some(f => f.id === friend.id);
			},

			// 移除已选好友
			removeFriend(index) {
				this.selectedFriends.splice(index, 1);
			},
			addCommentThumb(item) {

				var that = this;
				app.post('MemberNote/commentThumb', {
					member_note_id: item.member_note_id,
					comment_id: item.id
				}, function(data) {
					if (data.status == 200) {
						// 重置评论列表状态
						that.page = 1;
						that.nomore = false;
						that.loading = false;

						// 重新加载评论列表
						that.getlist(false, true);
					}
					app.success(data.msg);
				});
			},
			parsevideo: function() {

				uni.createVideoContext('video').stop();
			},
			toggleReplies(comment, item) {
				const that = this;


				if (comment.isExpanded) {
					comment.isExpanded = false;

					const index = that.comments.findIndex(c => c.id === comment.id);
					if (index > -1) {

						if (comment.sub_comment) {
							that.comments[index].sub_comments = [{
								...comment.sub_comment,
								member: comment.sub_member
							}];
						} else {
							that.comments[index].sub_comments = [];
						}
					}
					that.subCommentPage = 1;
					that.subCommentNoMore = false;
					that.$forceUpdate();
					return;
				}

				that.loadSubComments(comment, item);
			},


			// 新增：加载子评论的方法
			loadSubComments(comment, item, isLoadMore = false) {
				const that = this;
				console.log(comment, item);
				// Get current user info safely
				const currentUser = {
					nickname: app.globalData.memberinfo.nickname,
					headimg: app.globalData.memberinfo.headimg,
					mid: app.globalData.mid || ''
				};

				if (that.subCommentLoading || (isLoadMore && that.subCommentNoMore)) return;

				that.subCommentLoading = true;
				const page = isLoadMore ? that.subCommentPage + 1 : 1;

				app.get('MemberNote/subCommentList', {
					member_note_id: comment.member_note_id,
					root_id: item.root_id,
					page: page,
					limit: that.subCommentLimit
				}, (res) => {
					that.subCommentLoading = false;

					if (res.status !== 200) return;

					// Process sub-comments with reply relationships
					const newSubs = res.data.map(item => ({
						...item,
						id: item.id || item._id,
						member: item.sub_member || item.member || {
							nickname: currentUser.nickname,
							headimg: currentUser.headimg,
							mid: currentUser.mid
						},
						reply_member: item.reply_member || null // Use reply_member from API
					}));

					const index = that.comments.findIndex(c => c.id === comment.id);
					if (index === -1) return;

					if (isLoadMore) {
						that.comments[index].sub_comments = [
							...that.comments[index].sub_comments,
							...newSubs
						];
						that.subCommentPage = page;
					} else {
						that.comments[index].sub_comments = newSubs;
						that.subCommentPage = 1;
					}

					that.subCommentNoMore = newSubs.length < that.subCommentLimit;
					comment.isExpanded = true;
					that.$forceUpdate();
				});
			},

			// 新增：加载更多子评论的方法
			loadMoreSubComments(comment, item) {
				this.loadSubComments(comment, item, true);
			},

			goBack() {
				uni.navigateBack()
			},

			formatNumber(num) {
				if (num >= 10000) {
					// 将数字除以 10000 保留两位小数
					let formatted = (num / 10000).toFixed(2);
					// 如果小数部分为 00，去掉小数部分
					if (parseFloat(formatted) % 1 === 0) {
						formatted = Math.floor(num / 10000);
					}
					return `${formatted}W+`;
				}

				return num.toString();
			},
			toProduct(id) {
				app.globalData.commerce_mid = this.datainfo.mid;
				app.globalData.commerce_type = 2;
				uni.navigateTo({
					url: '/pages/shop/product?id=' + id + '&commerce_mid=' + this.datainfo.mid +
						'&commerce_type=' + app.globalData.commerce_type
				})
			},
			//点赞
			addThumbs: function() {
				var that = this;
				app.post('MemberNote/noteThumb', {
					member_note_id: that.opt.id
				}, function(data) {
					if (data.status == 200) {
						that.isthumbs = !that.isthumbs;
						that.getdata();
					}
					app.success(data.msg);
				});
			},
			//收藏操作
			addfavorite: function() {
				var that = this;

				app.post('MemberNote/noteCollect', {
					member_note_id: that.opt.id
				}, function(data) {
					if (data.status == 200) {
						that.isfavorite = !that.isfavorite;
						that.getdata();
					}
					app.success(data.msg);
				});
			},
			handleFollow() {
				var that = this;

				app.post('MemberNote/followMember', {
					follow_mid: that.datainfo.mid
				}, function(data) {
					if (data.status == 200) {

						that.getdata()
					}
					app.success(data.msg);
				});

			},

			onMainSwiperChange(e) {
				this.currentIndex = e.detail.current
			},
			previewImage(e) {
				const currentUrl = e.currentTarget.dataset.url
				const urls = e.currentTarget.dataset.urls.split(',')
				uni.previewImage({
					current: currentUrl,
					urls: urls
				})
			},
			formatTime(timestamp) {
				const date = new Date(timestamp);
				return `${date.getMonth()+1}月${date.getDate()}日`;
			},
			handleReply(comment, parentComment = null) {
				// If replying to a sub-comment
				if (parentComment) {
					if (!parentComment.member) {
						return;
					}

					this.replyTo = {
						username: parentComment.member.nickname || '用户',
						parentComment: parentComment,
						root_id: comment.id, // Use the main comment's ID as root_id
						parent_id: parentComment.id, // Use the sub-comment's ID as parent_id
						replyToMember: parentComment.member // Store the member being replied to
					};
				} else {
					// If replying to a main comment
					if (!comment.member) {
						return;
					}

					this.replyTo = {
						username: comment.member.nickname || '用户',
						parentComment: null,
						root_id: comment.id, // Use the comment's ID as root_id
						parent_id: 0, // When replying to main comment, parent_id is 0
						replyToMember: comment.member // Store the member being replied to
					};
				}
				this.isCommenting = true;
				// Auto focus input box
				this.$nextTick(() => {
					const query = uni.createSelectorQuery().in(this);
					query.select('.comment-input-wrapper').boundingClientRect(data => {
						if (data) {
							const scrollTop = data.top - 100;
							uni.pageScrollTo({
								scrollTop: scrollTop,
								duration: 300
							});

							setTimeout(() => {
								const inputQuery = uni.createSelectorQuery().in(this);
								inputQuery.select('.comment-input').boundingClientRect(
									inputData => {
										if (inputData) {
											const inputContext = uni.createSelectorQuery().in(
												this).select('.comment-input');
											inputContext.fields({
												context: true
											}, function(res) {
												if (res && res.context) {
													res.context.focus();
												}
											}).exec();
										}
									}).exec();
							}, 350);
						}
					}).exec();
				});
			},
			clearReply() {
				this.replyTo = null;
				// 如果没有输入内容，则退出评论状态
				if (!this.commentText.trim()) {
					this.isCommenting = false;
				}
			},
			sendComment() {
				let that = this;

				if (!that.commentText.trim()) {
					uni.showToast({
						title: '请输入评论内容',
						icon: 'none'
					});
					return;
				}


				const currentUser = {
					nickname: app.globalData.memberinfo.nickname,
					headimg: app.globalData.memberinfo.headimg,
					mid: app.globalData.mid || ''
				};

				that.isCommenting = false;

				let params = {
					content: that.commentText,
					member_note_id: that.opt.id,
					root_id: 0,
					parent_id: 0,
				};

				// 判断是否是回复主评论（parent_id为0）
				const isReplyToMainComment = that.replyTo && that.replyTo.parent_id === 0;

				if (that.replyTo) {
					params.root_id = that.replyTo.root_id || that.replyTo.commentId;
					params.parent_id = that.replyTo.parent_id;
				}

				app.showLoading('发送中...');

				app.post('MemberNote/commentAdd', params, function(res) {
					app.showLoading(false);

					if (res && res.status === 200) {

						const newComment = {
							id: res.data.id,
							content: that.commentText,
							create_time: new Date().toLocaleString(),
							member: {
								nickname: currentUser.nickname,
								headimg: currentUser.headimg,
								mid: currentUser.mid
							},
							mid: currentUser.mid,
							member_note_id: that.opt.id,
							root_id: params.root_id,
							parent_id: params.parent_id,
							thumbs: 0,
							is_thumbs: 0,
							reply_to_member: that.replyTo ? that.replyTo.replyToMember : null
						};

						if (that.replyTo) {
							// 如果是回复主评论，刷新整个列表
							if (isReplyToMainComment) {
								that.page = 1;
								that.nomore = false;
								that.loading = false;
								that.getlist(false, true);
							}
							// 如果是回复子评论，只更新对应的子评论列表
							else {
								const commentIndex = that.comments.findIndex(c => c.id === that.replyTo.root_id);
								if (commentIndex !== -1) {
									// 确保sub_comments数组存在
									if (!that.comments[commentIndex].sub_comments) {
										that.comments[commentIndex].sub_comments = [];
									}

									that.comments[commentIndex].sub_comments.push(newComment);
									that.comments[commentIndex].sub_comment_count = (that.comments[commentIndex]
										.sub_comment_count || 0) + 1;

									if (that.comments[commentIndex].sub_comment_count === 1) {
										that.comments[commentIndex].isExpanded = true;
									}
								}
							}
						} else {
							// 新评论（不是回复），添加到列表顶部
							that.comments.unshift({
								...newComment,
								sub_comments: [],
								sub_comment_count: 0,
								isExpanded: false
							});
						}

						// 更新评论计数
						that.commentCount = (that.commentCount || 0) + 1;
						that.commentText = '';
						that.clearReply();
						uni.hideKeyboard();

						uni.showToast({
							title: '发送成功',
							icon: 'success'
						});
					} else {
						app.error("评论失败:" + (res ? res.msg : '网络错误'));
					}
				});
			},

			copyLink: function() {
				var that = this;
				app.showLoading();
				app.post('Shop/getwxScheme', {
					proid: that.id,
					type: that.ptype
				}, function(data) {
					app.showLoading(false);
					if (data.status == 0) {
						app.alert(data.msg);
					} else {
						// that.showScheme = true;
						// that.schemeurl = data.openlink
						uni.setClipboardData({
							data: data.openlink,
							success: () => {
								uni.showToast({
									title: '链接已复制',
									icon: 'success',
									duration: 1000
								});
							}
						});
					}
				});
			},

			dialogToggle() {
				this.share();
				this.$refs.alertDialog.open()
			},
			share() {
				let that = this;
				uni.share({
					title: that.share_title,
					path: that.share_path,
					imageUrl: that.share_imageUrl,
				});
			},
			closedia() {
				this.$refs.alertDialog.close()
			},
			openPoster() {
				this.friendListShow = false;

				let that = this;
				app.showLoading('生成海报中');
				app.post('MemberNote/getposter', {
					id: that.opt.id
				}, function(data) {
					app.showLoading(false);
					if (data.status == 0) {
						app.alert(data.msg);
					} else {
						that.sharePoster = data.poster;
						that.isPoster = true;
					}
				});

			},
			closePoster() {
				this.isPoster = false
			},
			//保存
			save(e) {
				var _this = this
				let dimg = []
				dimg.push(_this.sharePoster)

				dimg.forEach(i => {
					// var src = this.sharePoster;
					let src = i;
					//#ifdef MP-WEIXIN
					//提前向用户发起授权请求
					uni.authorize({
						scope: 'scope.writePhotosAlbum',
						success() {
							console.log('dp-previewImage:允许储存');
							_this.downloadImg(src);
						}
					});
					//#endif

					//#ifdef APP-PLUS
					_this.downloadImg(src);
					//#endif

					//#ifdef H5
					//非同源图片将直接打开
					var abtn = document.createElement('a');
					abtn.href = src;
					abtn.download = '';
					abtn.target = '_blank';
					abtn.click();
					//#endif
				});
			},

			//下载并保存文件
			downloadImg(src) {
				//下载图片文件
				uni.showLoading({
					title: '大图提取中'
				});
				uni.downloadFile({
					url: src,
					success: function(res) {
						console.log('dp-previewImage:下载成功');
						uni.hideLoading();
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: () => {
								uni.showToast({
									title: '已保存至相册',
									duration: 1000
								});
							}
						});
					},
					fail: function() {
						uni.hideLoading();
						uni.showToast({
							title: '图片下载失败',
							icon: 'none',
							duration: 1000
						});
					}
				});
			},
			onInputFocus() {
				this.inputFocus = true;
				this.isCommenting = true;
				// 在微信小程序中，需要手动调整页面滚动位置
				// #ifdef MP-WEIXIN
				setTimeout(() => {
					const query = uni.createSelectorQuery().in(this);
					query.select('.comment-input-wrapper').boundingClientRect(data => {
						if (data) {
							const scrollTop = data.top - 100;
							uni.pageScrollTo({
								scrollTop: scrollTop,
								duration: 300
							});
						}
					}).exec();
				}, 100);
				// #endif
			},
			onInputBlur() {
				this.inputFocus = false;
				// 如果没有输入内容且没有回复对象，则退出评论状态
				if (!this.commentText.trim() && !this.replyTo) {
					setTimeout(() => {
						this.isCommenting = false;
					}, 100);
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.page {
		width: 100%;
		height: 100vh;
		background-color: #f8f8f8;
	}

	.custom-navbar {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background: #fff;
		display: flex;
		align-items: center;
		padding-left: 10rpx;
		padding-right: 30rpx;
		z-index: 999;
		border-bottom: 1px solid #f5f5f5;

		.nav-left {
			width: 60rpx;
			height: 60rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.back-icon {
			width: 24rpx;
			height: 24rpx;
			border-left: 4rpx solid #666;
			/* 加粗线条 */
			border-bottom: 4rpx solid #666;
			transform: rotate(45deg);
		}

		.nav-middle {
			display: flex;
			align-items: center;
			justify-content: center;

			.nav-avatar {
				width: 30px;
				height: 30px;
				border-radius: 50%;
				margin-right: 8px;
			}

			.nav-name {
				font-size: 16px;
				max-width: 300rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
		}

		.nav-right {

			text-align: right;
			position: absolute;
			right: 0;

			z-index: 9;

			.nav-follow-btn {
				display: inline-block;
				padding: 4rpx 20rpx;
				border: 1px solid #ff2442;
				color: #ff2442;
				border-radius: 15px;
				font-size: 12px;
			}
		}

		/* #ifdef H5 */
		.share {
			position: absolute;
			right: 0;
			padding: 20rpx;
			z-index: 10;
		}

		/* #endif */
		.share {
			position: absolute;
			right: 100rpx;
			padding: 20rpx;
			z-index: 10;
		}


		.share-icon {
			width: 48rpx;
			height: 48rpx;
		}
	}

	.container {
		width: 100%;
		padding-bottom: 20rpx;
	}

	.swiper {
		width: 100%;
		height: 750rpx;
		overflow: hidden;
	}

	.swiper-item-view {
		width: 100%;
		height: 750rpx;
	}

	.img {
		width: 100%;
		height: 750rpx;
		overflow: hidden;
	}

	.container-main {
		padding: 20rpx;
		border-bottom: 1px solid rgba(209, 209, 209, 1);
	}

	.container-main-title {}

	.title-box {
		font-size: 36rpx;
		font-weight: 700;
		margin-bottom: 10rpx;
	}

	.main-shop {
		background: #e7e7e7;
		border-radius: 10rpx;
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 10rpx;
	}

	.main-shop-left {
		display: flex;

	}

	.main-shop-left-text {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		margin-left: 20rpx;
	}

	.main-shop-price {
		display: flex;
		align-items: center;
	}

	.main-shop-sale {
		font-size: 24rpx;
		margin-left: 10rpx;
	}

	.shop-img {
		width: 100rpx;
		height: 100rpx;
		border-radius: 10rpx;
		flex-shrink: 0;
	}

	.text-name {
		display: -webkit-box;
		-webkit-line-clamp: 2;

		-webkit-box-orient: vertical;

		overflow: hidden;

		text-overflow: ellipsis;

	}

	.arr-right {
		width: 40rpx;
		height: 40rpx;
	}

	.friend-box {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
		margin-top: 20rpx;
	}

	.main-date {
		margin-top: 20rpx;
	}

	.main-date-text {
		margin-right: 10rpx;
	}

	.comment-section {
		padding-bottom: 80rpx;

		.section-title {
			font-size: 28rpx;
			margin-top: 20rpx;
			padding: 0 30rpx;
			font-weight: bold;
			margin-bottom: 20rpx;
			display: block;
		}

		.comment-list {
			padding: 0 30rpx;
			padding-bottom: calc(120rpx + env(safe-area-inset-bottom));
			padding-bottom: 80rpx;
			height: 100%;
			overflow-y: scroll;

			.comment-item {

				.avatar {
					width: 60rpx;
					height: 60rpx;
					border-radius: 50%;
					margin-right: 20rpx;
				}

				.comment-content {
					white-space: pre-wrap;
					word-break: break-word;
					overflow-wrap: break-word;
					display: block;
					width: 100%;

					.username {
						font-size: 26rpx;
						font-weight: bold;
						margin-bottom: 5rpx;
						display: block;
					}

					.text {
						font-size: 26rpx;
						margin-bottom: 5rpx;
						display: block;
					}

					.time {
						font-size: 22rpx;
						color: #999;
					}
				}
			}
		}
	}

	.input-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		padding: 20rpx;
		display: flex;
		align-items: center;
		border-top: 1rpx solid #f5f5f5;

		input {
			flex: 1;
			background: #f5f5f5;
			border-radius: 30rpx;
			padding: 15rpx 25rpx;
			margin-right: 20rpx;
		}

		image {
			width: 50rpx;
			height: 50rpx;
		}
	}

	// 当显示评论区时，需要为底部输入框留出空间
	.scrollable-content.has-input {
		height: calc(100vh - 422rpx - 88rpx - 112rpx); // 额外减去输入框高度
		padding-bottom: calc(env(safe-area-inset-bottom) + 112rpx);
	}

	.comment-section {

		min-height: 300rpx;
		height: 90%;
		// height: calc(100% - env(safe-area-inset-bottom));
	}

	.comment-tip {
		padding: 30rpx 0;
		text-align: center;
		color: #999;
		font-size: 28rpx;
	}


	.comment-item {
		padding: 30rpx 0;
		border-bottom: 1rpx solid rgba(0, 0, 0, 0.05);
	}

	.comment-user {
		display: flex;
		align-items: flex-start;
		position: relative;
	}

	.user-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 20rpx;
		flex-shrink: 0;
	}

	.user-info {
		flex: 1;
	}

	.user-info-flex {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.user-name {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 8rpx;
	}

	.comment-extra {
		display: flex;
		align-items: center;
	}

	.user-tag {
		font-size: 24rpx;
		color: #666;
		margin-right: 16rpx;
	}

	.comment-date {
		font-size: 24rpx;
		color: #999;
	}

	.reply-btn {
		font-size: 24rpx;
		color: #000000;
		margin-left: 15rpx;

		padding: 6rpx;
		border-radius: 8rpx;
	}

	.delete-btn {
		font-size: 24rpx;
		color: red;
		margin-left: 20rpx;
		background-color: #f1f1f1;
		padding: 6rpx;
		border-radius: 8rpx;
	}

	.comment-content {
		font-size: 28rpx;
		color: #333;
		margin: 16rpx 0;
		line-height: 1.5;
	}

	.reply-list {

		border-radius: 8rpx;
		margin-top: 16rpx;
		padding: 16rpx;
	}

	.reply-item {
		display: flex;
		margin-bottom: 16rpx;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.reply-avatar {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		margin-right: 12rpx;
	}

	.reply-info {
		flex: 1;
	}

	.reply-name {
		font-size: 24rpx;
		color: #666;
		margin-bottom: 4rpx;
	}

	.reply-content {
		font-size: 26rpx;
		color: #333;
		line-height: 1.4;
		word-wrap: break-word;
		white-space: pre-wrap;
	}

	.reply-to {

		margin-right: 4rpx;
	}

	.reply-extra {
		margin-top: 4rpx;
	}

	.reply-date {
		font-size: 22rpx;
		color: #999;
	}

	.comment-input-wrapper {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		padding: 20rpx 30rpx;
		box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
		z-index: 100;
		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
		display: flex;
		align-items: center;
		justify-content: space-between;
		transform: translateZ(0);
		-webkit-transform: translateZ(0);
		transition: all 0.3s ease;

		&.is-commenting {
			padding-right: 30rpx;

			.comment-input-box {
				flex: 1;
				margin-right: 0;
			}
		}
	}

	.comment-input-box {
		flex: 1;
		display: flex;
		align-items: center;
		background: #f8f8f8;
		border-radius: 36rpx;
		padding: 0 24rpx;
		min-height: 72rpx;
		position: relative;
		z-index: 101;
		transition: all 0.3s ease;
		border: 2rpx solid transparent;
		margin-right: 20rpx;

		&.has-reply {
			background: #fff;
			border-color: #e8f3ff;
		}

		&:focus-within {
			background: #fff;
			border-color: #ba1f25;
			box-shadow: 0 0 0 2rpx rgba(186, 31, 37, 0.1);
		}
	}

	.comment-input {
		flex: 1;
		height: 72rpx;
		font-size: 28rpx;
		background: transparent;
		min-height: 72rpx;
		line-height: 72rpx;
		padding: 0 20rpx;
		color: #333;
		width: 100%;

		&::placeholder {
			color: #999;
		}
	}

	.reply-tag {
		display: inline-flex;
		align-items: center;
		background: #e8f3ff;
		padding: 4rpx 12rpx;
		border-radius: 24rpx;
		margin-right: 12rpx;
		font-size: 26rpx;
		color: #ba1f25;
		position: relative;
		z-index: 102;
		max-width: 200rpx;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		flex-shrink: 0;

		.close-icon {
			margin-left: 8rpx;
			font-size: 28rpx;
			color: #999;
			padding: 4rpx;
		}
	}

	.send-btn {
		padding: 0 24rpx;
		height: 72rpx;
		line-height: 72rpx;
		font-size: 28rpx;
		transition: all 0.3s ease;
		flex-shrink: 0;

		&.active {
			font-weight: 500;
		}
	}

	.expand-btn {
		text-align: left;
		padding: 20rpx 0;
		cursor: pointer;

		.expand-text {
			font-size: 28rpx;

		}
	}

	.follow-btn {
		background: #ba1f25;
		color: #fff;
		padding: 0rpx 12rpx;
		border-radius: 10rpx;
		font-size: 24rpx;
		height: 40rpx;
		line-height: 40rpx;
		margin-left: 10rpx;
	}

	.comment-input-right {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-left: 10rpx;
	}

	.comment-input-right-item {
		display: flex;
		align-items: center;
		margin-right: 10rpx;
	}

	.item-icon {
		width: 40rpx;
		height: 40rpx;
		margin-right: 10rpx;
	}

	.load-more-data {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx 0;
	}

	.load-more-data-top {
		width: 150rpx;
		height: 150rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		background-color: #f1f1f1;
		font-size: 38rpx;
	}

	.load-more-data-text {
		margin-top: 10rpx;
	}

	.load-more-sub {
		text-align: center;
		padding: 20rpx 0;

		.load-more-btn {
			color: #666;
			font-size: 28rpx;
			padding: 10rpx 30rpx;
			background: #f5f5f5;
			border-radius: 30rpx;
		}
	}

	.no-more {
		text-align: center;
		padding: 20rpx 0;
		color: #999;
		font-size: 24rpx;
	}

	.comment-right-icon {
		display: flex;
		align-items: center;

	}

	.videobox {
		width: 100%;
		height: 700rpx;
		text-align: center;
	}

	.videobox .video {
		width: 100%;
		height: 650rpx;
	}

	.videobox .parsevideo {
		margin: 0 auto;
		margin-top: 20rpx;
		height: 40rpx;
		line-height: 40rpx;
		color: #333;
		background: #ccc;
		width: 140rpx;
		border-radius: 25rpx;
		font-size: 24rpx
	}

	.comment-nodata {
		display: flex;
		align-items: center;
		justify-content: center;
		margin: 20rpx 100rpx;
	}

	/* 弹窗样式 */
	.popup__container {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 999;
	}

	.popup__overlay {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.5);
	}

	.popup__modal {
		position: absolute;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		border-radius: 24rpx 24rpx 0 0;
		min-height: 720rpx;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.popup__title {
		padding: 30rpx;
		position: relative;
		display: flex;
		justify-content: center;


	}

	.dialog-close-icon {
		width: 30rpx;
		height: 30rpx;
		position: absolute;
		right: 20rpx;
		top: 20rpx;
	}

	.service-item {
		padding: 30rpx 0;
		text-align: center;
		border-bottom: 1px solid #eee;
	}

	.friend-list-modal {
		max-height: 80vh;
		display: flex;
		flex-direction: column;
	}

	.friend-list {

		overflow-x: auto;
		padding: 0 30rpx;
		display: flex;
		border-bottom: 1px solid #eee;
	}

	.friend-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx 0;
		position: relative;
		width: 150rpx;
		/* 与头像宽度一致 */
		margin-right: 20rpx;
		/* 调整间距 */
	}

	.avatar-container {
		width: 150rpx;
		height: 150rpx;
	}

	.friend-avatar {
		width: 150rpx;
		height: 150rpx;
		border-radius: 50%;
		position: relative;
		/* 让绝对定位的 checkbox 相对于头像定位 */
	}

	.friend-checkbox {
		width: 40rpx;
		height: 40rpx;
		border: 2rpx solid #ddd;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		position: absolute;
		top: 120rpx;
		right: 0;
		background: white;
		z-index: 1;

		&.checked {
			background-color: #07c160;
			border-color: #07c160;
			color: #fff;
		}
	}

	.friend-info {
		width: 100%;
		/* 与头像同宽 */
		text-align: center;
		margin-top: 10rpx;
		/* 头像和名字的间距 */
	}

	.friend-name {
		font-size: 28rpx;
		color: #333;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.load-more {
		text-align: center;
		padding: 20rpx 0;
		color: #666;
		font-size: 28rpx;
	}

	.fixed-confirm-btn {
		position: absolute;
		bottom: 0;
		left: 20rpx;
		right: 0;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		border-radius: 60rpx;
		color: white;
		font-size: 32rpx;
		z-index: 10;
		background-color: #c7242a;
		padding-bottom: env(safe-area-inset-bottom);
	}

	.content-box {
		display: flex;
		justify-content: space-between;
		padding: 10rpx 20rpx;
	}

	.content-input {
		font-size: 28rpx;
		width: 80%;
		height: 200rpx;
	}

	.content-img {
		width: 150rpx;
		height: 150rpx;
	}

	.share-methods {
		position: relative;
		padding: 40rpx 0;

		.divider-text {
			position: absolute;
			top: 0;
			left: 50%;
			transform: translateX(-50%);
			background-color: #fff;
			padding: 0 20rpx;
			color: #9f9f9f;
			font-size: 28rpx;
		}

		.methods-list {
			display: flex;
			justify-content: space-around;
			padding-top: 20rpx;

			.method-item {
				text-align: center;
				display: flex;
				flex-direction: column;
				align-items: center;

				image {
					width: 76rpx;
					height: 76rpx;
				}

				text {
					font-size: 24rpx;
					color: #666;
				}
			}
		}
	}

	.tipcontent {
		background-color: #fff;
		border-radius: 20rpx;
		padding: 20rpx 0;

		.tiptitle {
			margin-top: 20rpx;
			text-align: center;
			font-size: 40rpx;
			font-weight: bold;
		}

		.tipbtn {
			font-size: 30rpx;
			border-radius: 50rpx;
			width: 65%;
			color: #fff;
			padding: 8rpx 0;
			margin-bottom: 20rpx;
		}
	}

	.poster-section {
		flex: 1;
		// padding: 20rpx;
		// overflow-y: auto;
		height: 60vh;
		margin-top: 190rpx;
	}

	.bottom-section {
		background: #fff;
		padding: 20rpx;
		padding-top: 0;
		// height: 100%;
		height: 40vh;
		// border-top-left-radius: 20rpx;
		// border-top-right-radius: 20rpx;
	}

	.goods-card {
		background-color: #fff;
		// border-radius: 16rpx;
		padding: 20rpx;
		height: 95%;
		position: relative;

		.goods-image {
			width: 100%;
			height: 100%;
			border-radius: 12rpx;
		}
	}

	.download-btn {
		background-color: #00b578;
		color: #fff;
		border-radius: 40rpx;
		font-size: 32rpx;
		margin: 30rpx auto;
		width: 80%;
		height: 80rpx;
		display: flex;
		align-items: center;
		justify-content: center;

		&:disabled {
			background-color: #ccc;
		}
	}

	.close-poster {
		font-size: 40rpx;
		text-align: right;
		padding: 0 20rpx;
	}
</style>